<template>
	<view class="doc">
		<!-- 号源 -->
		<view class="hoslist" v-for="item in hoslist" :key="item.plat_hospital_name">
			<view class="hosmain">
				<view class="hositem">
					<view class="hostop" @click="zhankai(item)">
						<view class="hostopl">
							<view class="hosnum" :style="{background:item.color}">
								{{item.num}}
							</view>
							<view class="hositenname" @click="gohos(item)">
								<span style="color: #333;"
									v-if="item.plat_hospital_name.length<=15">{{item.plat_hospital_name}}</span>
								<span style="color: #333;"
									v-if="item.plat_hospital_name.length>15">{{item.plat_hospital_name.substr(0,15)}}..</span>
								<!-- <span style="display: inline-block;">
									<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
								</span> -->
							</view>
						</view>
						<view class="hostopr" >
							<!-- 	<view class="you">
								有号
							</view> -->
							<view class="" v-if="item.show==false">
								<u-icon name="arrow-down" color="#575B66"></u-icon>
							</view>
							<view class="" v-if="item.show==true">
								<u-icon name="arrow-up" color="#575B66"></u-icon>
							</view>
						</view>
					</view>
					<view class="" v-if="hosid==item.hospitalId">
						<view class="hosdep">
							<view class="depitem" v-for="itdep in item.deptplace" :key="itdep.departmentBasicId"
								:class="{ activedep: activedep == itdep.departmentBasicId}" @click="choosedep(itdep)">
								{{itdep.dept_name}}
							</view>
						</view>
						<view class="suoyou">
							<view class="allhao" @click="getsuoyou()">
								<view class="suoi" :class="{ activeall: activeall == 1}">
									<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
								</view>
								<view class="suotit">
									所有号源
								</view>
							</view>
							<view class="shuaxin" @click="getpaiban()">
								<view class="shuxinmain">
									<image src="../../static/icon/shuaxin.png" mode="aspectFit"></image>
									刷新
								</view>
							</view>
						</view>
						<view class="haoyuan">
							<view class="left_huadong" @click="huadong(1)">
								<u-icon  name="arrow-left" color="#fff"></u-icon>
							</view>
							<view class="huadong" @click="huadong(2)">
								<u-icon  name="arrow-right" color="#fff"></u-icon>
							</view>
							
							<view class="haoyuanl">
								<view class="">
									上午
								</view>
								<view class="">
									下午
								</view>
							</view>
							<view class="haoyuanr">
								<ul>
									<li v-for="itam in haowulist" :key="itam.date">
										<view class="datetop">
											<p>{{itam.week}}</p>
											<p>{{itam.date.slice(5)}}</p>
										</view>
										<!-- 上午 -->
										<view class="" v-if="itam.schedules!=null">
											<view class="" v-if="itam.schedules.am!=null">
												<view class="haoitem" v-if="itam.schedules.am.state=='4'">

												</view>
												<view class="haoitem" style="background-color: #557FEF;"
													@click="gethao(itam.schedules.am,item)"
													v-if="itam.schedules.am.state=='1'">
													预约
												</view>
												<view class="haoitem"
													style="background-color: #FFF1EF;color: #D34E3F;font-weight: bold;"
													@click="yuman()" v-if="itam.schedules.am.state=='2'">
													约满
												</view>
												<view class="haoitem"
													style="background-color: #FFF8E5;color: #F3C64F;font-weight: bold;"
													@click="tingzhen()" v-if="itam.schedules.am.state=='3'">
													停诊
												</view>
												<view class="haoitem"
													style="background-color: #F2F2F2;color: #999;font-weight: bold;"
													@click="tingyue()" v-if="itam.schedules.am.state=='5'">
													停约
												</view>
											</view>
											<view class="" v-if="itam.schedules.am==null">
												<view class="haoitem">

												</view>

											</view>
											<!-- 下午 -->
											<view class="" v-if="itam.schedules.pm!=null">
												<view class="haoitem" v-if="itam.schedules.pm.state=='4'">

												</view>
												<view class="haoitem" style="background-color: #557FEF;"
													@click="gethao(itam.schedules.pm,item)"
													v-if="itam.schedules.pm.state=='1'">
													预约
												</view>
												<view class="haoitem"
													style="background-color: #FFF1EF;color: #D34E3F;font-weight: bold;"
													@click="yuman()" v-if="itam.schedules.pm.state=='2'">
													约满
												</view>
												<view class="haoitem"
													style="background-color: #FFF8E5;color: #F3C64F;font-weight: bold;"
													@click="tingzhen()" v-if="itam.schedules.pm.state=='3'">
													停诊
												</view>
												<view class="haoitem"
													style="background-color: #F2F2F2;color: #999;font-weight: bold;"
													@click="tingyue()" v-if="itam.schedules.pm.state=='5'">
													停约
												</view>
											</view>
											<view class="" v-if="itam.schedules.pm==null">
												<view class="haoitem">
												</view>
											</view>
										</view>
										<!-- 结束 -->
										<view class="" v-if="itam.schedules==null">
											<view class="haoitem">
											</view>
											<view class="haoitem">
											</view>
										</view>
									</li>
								</ul>
							</view>
						</view>
						<view class="haoshuo">
							<view class="haoshuol">
								<view class="haoloitem">
									<view class="haologo">

									</view>
									<view class="haologoinfo">
										预约
									</view>
								</view>
								<view class="haoloitem">
									<view class="haologo" style="background-color: #e54032;">

									</view>
									<view class="haologoinfo">
										约满
									</view>
								</view>
								<view class="haoloitem">
									<view class="haologo" style="background-color: #fcc525;">

									</view>
									<view class="haologoinfo">
										停诊
									</view>
								</view>
								<view class="haoloitem">
									<view class="haologo" style="background-color: #999;">

									</view>
									<view class="haologoinfo">
										停约
									</view>
								</view>
							</view>
							<view class="haoshuor" style="display: flex;" @click="showshuo()">
								号源说明 <span style="margin-top: 7rpx;"><u-icon color="#333" size="12"
										name="arrow-right"></u-icon></span>
							</view>
						</view>
						<view class="zhu">
							注：{{item.release_no_time}}放出最新一天的排班。是否有号以医院实际安排为准。
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mybtn_box">
			<view class="btn" @click="getContext">
				发送医生主页
			</view>
			<!-- <u-image :src="shallImg" height="800"></u-image> -->
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getDocLocationParams,
		getDocLocation,
		paiban,
		PicList
	} from '@/api/index'
	import register from '@/utils/register'
	export default {
		data() {
			return {
				titlejian: "温馨提示",
				contentjian: "您还未建主档案，请先完善信息。",
				show: false,
				content: "",
				showshuoming: false,
				popupShow: false,
				guanshow: false,
				count: 5,
				activedep: "",
				activeall: "",
				active: "",
				goodat: '',
				showdoc: false,
				showhaoyuan: false,
				showdocinfo: false,
				hosid: "",
				hoslist: [],
				pinglist: [],
				haowulist: [],
				haolist: [

				],
				haoo: "",
				hao: "",
				token: '',
				docinfo: "",
				xiaoshilist: "",
				docid: "",
				hosname: "",
				haoinfo: "",
				paibanid: "",
				pageNumber: "0",
				pageSize: "5",
				pingtotal: "",
				userinfo: "",
				gongshow: false,
				doctor_code: "",
				gongcontent: "",
				pingfen: "",
				huanphone: "",
				wechatCode: '',
				showw: false,
				showpp: false,
				showjian: false,
				code: "",
				xiaoshiinfo: {},
				tuikeid: "",
				docName:'复诊预约、预就诊',  //分享是的医生名称
				shallTitle:'' ,//分享标题
				shallImg:''
			}
		},

		onLoad(option) {
			//this.docid = option.docid
			//this.hosid = "1597528515132264448"
			this.getdocinfo()
		},
		onReady() {
			this.getLocal()
		},
		methods: {
			async sendToMessageBox() {
				this.$ww.sendChatMessage({
					msgtype: "news", //消息类型，必填
					enterChat: false, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
					news: {
						link: `https://wx.precare.cn/pages/docinfo/docinfo?docid=${this.docid}`, //H5消息页面url 必填
						title: this.shallTitle, //H5消息标题
						desc: this.docName, //H5消息摘要
						imgUrl:this.shallImg, //H5消息封面图片URL
					},
					success: (res)=> {
						//alert(123)
						this.message = JSON.stringify(res)
						this.$u.toast('发送成功！！！')
						//todo:
					},
					fail:(res)=>{
						this.showEorror = JSON.stringify(res)
						//this.$u.toast('请到会话框执行该操作！')
						alert(JSON.stringify(res))
						console.log(res);
					}
				});
			},
			async getLocal() { //获取缓存
				let res = await	PicList()
				let r = res.data.find(v=>v.imageDesc == '复诊预约分享')
				if(r) this.shallImg = r.imageUrl
				console.log(r);
			},
			async getContext() {
				await register(['getContext','sendChatMessage'])
				this.$ww.getContext({
					success: (res)=> {
						//console.log(res,'res');
						//alert(JSON.stringify(res.entry))
						this.entry = JSON.stringify(res.entry) ; //返回进入小程序的入口类型
						if(res.entry == 'normal'){
							this.$u.toast('请到会话框执行该操作！')
							return
						}
						
						this.sendToMessageBox() //分享到聊天框
						var shareTicket = res.shareTicket;
					},
					fail:(res)=>{
						alert(res)
						//this.$u.toast(JSON.stringify(res))
						//this.$u.toast('此功能，需从侧边栏进入才能确定发送患者，正常使用功能！！！')
						console.log(res);
					}
				})
			},
			sendDoc(){  //分享到聊天框
				this.sendToMessageBox()
			},
			huadong(type) {
				if(type == 1){  //左
					var container = document.querySelector('.haoyuanr');
					container.scrollLeft -= 200; // 向左滑动100px
				}
				if(type == 2){  //右
					var container = document.querySelector('.haoyuanr');
					container.scrollLeft += 200; // 向左滑动100px
				}
				
			},
			gohos(item) {
				//console.log(item, "123456")
				// uni.navigateTo({
				// 	url: "/pages/hosindex/hosindex?hosid=" + item.hospitalId
				// })
			},
			tingzhen() {
				// uni.showToast({
				// 	title: "该时间段已停诊",
				// 	icon: 'none'
				// })
			},
			tingyue() {
				// uni.showToast({
				// 	title: "该时间段已停约",
				// 	icon: 'none'
				// })
			},
			yuman() {
				// uni.showToast({
				// 	title: "该时间段已约满",
				// 	icon: 'none'
				// })
			},
			getsuoyou() {
				this.activeall = "1"
				this.activedep = ""
				this.getpaiban()
			},
			async gethoslist() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let colorlist = ["#F3B242", "#78CF88", "#53bff5"]
				let results = await getDocLocationParams()
				this.shallTitle =  results.data.nickName ? results.data.nickName + '的医生工作室'  : this.shallTitle
				getDocLocation({
					doctorCode: results.data.ghDoctorCode,
					hospitalCode:results.data.ghHospitalCode
				}).then(res => {
					//console.log(results,'hos');
					uni.hideLoading()
					this.hoslist = res.data
					this.tuikeid = res.data[0].deptplace[0].departmentBasicId
					this.hosid = res.data[0].hospitalId
					this.hosname = res.data[0].plat_hospital_name
					this.docid =  res.data[0].doctor_id  //医生ID
					this.hoslist.forEach(el => {
						if (el.hospitalId == this.hosid) {
							this.hosname = el.plat_hospital_name
							//console.log(this.hosname)
						}
					})
					if (this.activedep == "") {
						this.activeall = "1"
					}
					//console.log( this.hosid,this.activedep, this.docid);
					this.getpaiban()
					//console.log(this.hosid, "123456")
					for (let i = 0; i < colorlist.length; i++) {
						for (let j = 0; j < this.hoslist.length; j++) {
							this.hoslist[j].num = j + 1
							this.hoslist[j].show = false
							if (j == i) {
								this.hoslist[j].color = colorlist[i]
							}
						}
					}
					if (this.hoslist.length == 1) {
						this.hoslist[0].show = true
						//console.log(this.hoslist, "111111")
					}
				})
			},
			getpaiban() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				//console.log( this.hosid,this.activedep, this.docid);
				//console.log(this.activedep, "111")
				paiban({
					hospitalId: this.hosid,
					departmentBasicId: this.activedep,
					doctorId: this.docid
				}).then(res => {
					uni.hideLoading()
					this.haowulist = res.data
				})
			},
			getdocinfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let colorlistt = [{
						bgccolor: "#FAD9A7",
						color: "#91562E"
					},
					{
						bgccolor: "#FFCFB5",
						color: "#D06B00"
					}
				]
				this.gethoslist()
			},
			showshuo() {
				this.popupShow = true
				this.showshuoming = true
			},
			choosedep(item) {
				this.activedep = item.departmentBasicId
				this.activeall = "2"
				this.getpaiban()
			},
			gethao(item, itam) {
			},
			zhankai(item) {
			//	console.log(item)
				if (this.hosid) {
					if (this.hosid == item.hospitalId) {
						this.hosid = ""
						item.show = false
					} else {
						this.hoslist.forEach(el => {
							el.show = false
						})
						item.show = true
						this.hosid = item.hospitalId
						this.hosname = item.plat_hospital_name
						this.docid = item.doctor_id
						this.getpaiban()
					}

				} else {
					item.show = true
					this.hosid = item.hospitalId
					this.docid = item.doctor_id
					this.hosname = item.plat_hospital_name
					this.getpaiban()
				}

			}
		}
	}
</script>
<style>
	.u-modal__content {
		text-align: center;
	}

	.tanchuang {
		width: 700rpx;
	}
</style>
<style scoped lang="scss">
	.popupShow {}
	.mybtn_box{
		.btn{
			padding: 20rpx;
		}
		//display: inline;
		margin: 30rpx 24rpx 50rpx 24rpx;
		border-radius: 20rpx;
		background-color: #4DC0D9;
		color: white;
		font-size: 32rpx;
		//line-height: 50rpx;
		text-align: center;
	}
	.pop {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 150rpx;
		padding-bottom: 30rpx;

		.poptop {
			width: 100%;
		}

		.cardimg {
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hosname {
			width: 95%;
			margin: 0 auto;
			text-align: center;
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 80rpx;
		}



		.title {
			width: 100%;
			text-align: center;
			margin-top: 18rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 550;
		}

		.info {
			width: 80%;
			margin: 0 auto;
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.shuomingg {
			width: 95%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #999;
			line-height: 40rpx;
			margin-top: 80rpx;

			span {
				color: orange;
			}

		}

		.foott {
			width: 80%;
			margin: 0 auto;
			display: flex;
			// margin-top: 20rpx;
			justify-content: space-between;



			.agree {
				width: 80%;
				height: 90rpx;
				margin: 0 auto;
				font-size: 34rpx;
				color: #fff;
				border-radius: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #3669F8;
				margin-top: 100rpx;
			}
		}
	}

	.doc {
		width: 100%;
		background-color: #F8f8f8;
		padding-bottom: 100rpx;
		overflow: hidden;
		// padding-top: 80rpx;

		.commore {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			background-color: #fff;
			line-height: 80rpx;

			.commoremain {
				width: 95%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.commorel {
					font-size: 30rpx;
					color: #3D3D3D;

					span {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.commorer {
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}


		.hoslist {
			width: 100%;
			margin: 0 auto;
			margin-top: 20rpx;
			background-color: #fff;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.hosmain {
				width: 703rpx;
				margin: 0 auto;

				.haoshuo {
					display: flex;
					justify-content: space-between;
					width: 610rpx;
					margin-left: 100rpx;
					margin-top: 25rpx;
					color: #3D3D3D;

					.haoshuol {
						display: flex;

						.haoloitem {
							display: flex;
							margin-right: 20rpx;

							.haologo {
								width: 40rpx;
								height: 28rpx;
								background-color: #557FEF;
								border-radius: 8rpx;
								margin-top: 2rpx;
							}

							.haologoinfo {
								font-size: 24rpx;
								color: #333;
								margin-left: 10rpx;
							}
						}

					}

					.haoshuor {
						font-size: 24rpx;
						color: #333;
					}
				}

				.zhu {
					width: 610rpx;
					margin-left: 100rpx;
					font-size: 24rpx;
					color: #428EEF;
					line-height: 34rpx;
					margin-top: 20rpx;
				}

				.haoyuan {
					display: flex;
					padding-top: 30rpx;
					overflow: hidden;
					position: relative;

					.huadong {
						position: absolute;
						background-color: #333;
						opacity: 0.32;
						border-radius: 50%;
						top: 180rpx;
						right: 15rpx;
						color: #fff;
						text-align: center;
						line-height: 40rpx;
						padding: 6rpx;
					}
					
					.left_huadong{
						position: absolute;
						background-color: #333;
						opacity: 0.32;
						border-radius: 50%;
						top: 180rpx;
						left: 100rpx;
						color: #fff;
						text-align: center;
						line-height: 40rpx;
						padding: 6rpx;
					}
					
					.haoyuanl {
						font-size: 28rpx;
						color: #666666;
						line-height: 90rpx;
						color: #888;
						width: 100rpx;
						margin-top: 75rpx;
					}


					.haoyuanr {
						display: flex;
						overflow: scroll;
						width: 95%;
						margin: 0 auto;
						padding-right: 100rpx;

						ul {
							display: flex;
							list-style: none;
							margin: 0;
							padding: 0;

							li {
								list-style: none;

								// background: #f5f5f7;
								border-radius: 10rpx;
								text-align: center;

								// margin-right: 12rpx;
								.datetop {
									width: 100rpx;
									text-align: center;
									font-size: 24rpx;
									line-height: 40rpx;

								}

								.haoitem {
									width: 90rpx;
									height: 85rpx;
									border-radius: 10rpx;
									background-color: #F2F2F2;
									margin: 5.5rpx;
									margin-top: 11rpx;
									line-height: 75rpx;
									color: #fff;
									font-size: 26rpx;
								}


							}
						}
					}
				}

				.suoyou {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.allhao {
						display: flex;
						margin-top: 10rpx;

						.suoi {
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							border: 1rpx solid #ccc;
							text-align: center;
							line-height: 30rpx;
							font-size: 20rpx;
							color: #fff;
						}

						.suotit {
							font-size: 28rpx;
							line-height: 30rpx;
							margin-left: 10rpx;
						}

						.activeall {
							background-color: #417ef7;
							border: none;

						}
					}

					.shuaxin {
						width: 132rpx;
						height: 48rpx;
						background: #F8F8F8;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 26rpx;
						color: #333333;
						border: 1rpx solid #CCCCCC;

						.shuxinmain {
							width: 70%;
							margin: 0 auto;
							line-height: 48rpx;
							display: flex;

							image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 5rpx;
								margin-top: 12rpx;
							}
						}

					}
				}

				.hosdep {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.depitem {
						font-size: 26rpx;
						line-height: 50rpx;
						margin-top: 20rpx;
						height: 50rpx;
						// margin: 15rpx;
						margin-right: 15rpx;
						margin-top: 15rpx;
						border: 2rpx solid #cccccc;
						color: #999999;
						padding-left: 20rpx;
						padding-right: 20rpx;
						// background-color: #f4f7ff;
						border-radius: 8rpx;
						position: relative;

						// .dian {
						// 	font-size: 80rpx;
						// 	position: absolute;
						// 	top: -47rpx;
						// 	right: -15rpx;
						// 	color: #428EEF;
						// }
					}

					.activedep {
						border: 1rpx solid #428EEF;
						color: #428EEF;
						background-color: #f4f7ff;
					}
				}

				.hositem {
					.hostop {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.hostopl {
							display: flex;

							.hosnum {
								width: 35rpx;
								height: 35rpx;
								background-color: #F3B242;
								border-radius: 10rpx;
								text-align: center;
								line-height: 35rpx;
								font-size: 20rpx;
								color: #fff;
							}

							.hositenname {
								font-size: 28rpx;
								line-height: 35rpx;
								margin-left: 10rpx;

								span {
									margin-left: 10rpx;
									color: #999;
								}
							}
						}

						.hostopr {
							display: flex;

							.you {
								width: 50rpx;
								font-size: 20rpx;
								height: 35rpx;
								line-height: 35rpx;
								text-align: center;
								border-radius: 5rpx;
								color: #fff;
								background-color: #57B663;
								margin-right: 5rpx;
							}
						}
					}
				}
			}
		}

		.docinfo {
			// width: 93%;
			margin: 0 auto;
			background-color: #fff;
			padding-bottom: 15rpx;
			padding-top: 40rpx;
			position: relative;

			.pingfen {
				position: absolute;
				top: 140rpx;
				left: 40rpx;
				width: 100rpx;
				height: 35rpx;
				background: #FFF8E5;
				border-radius: 20rpx;
				border: 1rpx solid #AC7C00;
				text-align: center;
				line-height: 35rpx;

			}

			.goodat {
				width: 93%;
				margin: 0 auto;
				background-color: #F8F8F8;
				border-radius: 20rpx;
				margin-top: 50rpx;

				.goodatmain {
					width: 95%;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					padding-bottom: 10rpx;
					margin-top: 20rpx;

					.ginfo {
						width: 75%;
						font-size: 26rpx;
						height: 80rpx;
						line-height: 80rpx;
						overflow: hidden;
						color: #637371;
						letter-spacing: 1rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;

					}

					.lijie {
						width: 20%;
						font-size: 26rpx;
						color: #428EEF;
						height: 80rpx;
						line-height: 80rpx;
					}
				}

			}

			.docnum {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				margin-top: 30rpx;

				.docnumitem {
					width: 33.33%;
					font-size: 26rpx;
					// font-weight: bold;
					// line-height: 50rpx;

					span {
						color: orange;
						margin-left: 10rpx;
					}
				}
			}

			.docbiao {
				margin-top: 10rpx;
				overflow: auto;
				display: flex;
				width: 560rpx;
				white-space: nowrap;
				/* 防止内容换行 */
				margin-left: 165rpx;

				.docbiaoitem {
					margin-right: 10rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 40rpx;
					background-color: #FFF8E5;
					color: #AC7C00;
					border: 1rpx solid #AC7C00;
					letter-spacing: 3rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
				}
			}

			.baibiao {
				margin-top: 20rpx;
				overflow: auto;
				display: flex;
				width: 560rpx;
				margin-left: 165rpx;
				white-space: nowrap;

				/* 防止内容换行 */
				.baiitem {
					margin-right: 10rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 40rpx;
					background-color: #E9F2FF;
					color: #428EEF;
					border: 1rpx solid #428EEF;
					letter-spacing: 3rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
				}
			}

			.dochos {
				font-size: 25rpx;
				line-height: 40rpx;
				display: flex;
				flex-wrap: wrap;
				margin-left: 165rpx;
				margin-top: -50rpx;

				.hosnamea {
					width: 400rpx;
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #333333;


				}

				.zhilogo {
					width: 52rpx;
					height: 28rpx;
					background: #5AC3B4;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					text-align: center;
					line-height: 28rpx;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					margin-top: 5rpx;

				}

				.hostype {
					font-size: 15rpx;
					padding-left: 6rpx;
					padding-right: 6rpx;
					line-height: 24rpx;
					margin-left: 10rpx;
					margin-top: 5rpx;
					height: 24rpx;
					color: #FF9A00;
					border: 1.5rpx solid #FF9A00;
					border-radius: 5rpx;
				}
			}

			.doctaglist {
				margin-left: 135rpx;
				display: flex;
				flex-wrap: wrap;

				.doctag {
					font-size: 22rpx;
					color: #91562E;
					background-color: #FAD9A7;
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 35rpx;
					height: 35rpx;
					border-radius: 5rpx;
					margin-top: 10rpx;
					margin-right: 10rpx;
				}

				.doctag1 {
					font-size: 20rpx;
					color: #D06B00;
					background-color: #FFCFB5;
					padding-left: 10rpx;
					padding-right: 10rpx;
					line-height: 35rpx;
					border-radius: 5rpx;
					margin-top: 10rpx;
					margin-right: 10rpx;
				}
			}

			.info {
				width: 92%;
				margin: 0 auto;
				display: flex;
				// padding-bottom: 20rpx;

				.infor {
					// width: 90rpx;
					// height: 45rpx;
					// font-size: 20rpx;
					// line-height: 45rpx;
					// color: blue;
					// text-align: center;
					// // background-color: #f4f7ff;
					// border-radius: 22.5rpx;
					display: flex;
					// justify-content: flex-end;

					.inforitemr {

						font-size: 24rpx;
						line-height: 48rpx;
						// color: blue;
						text-align: center;
						background-color: #428EEF;
						color: #fff;
						width: 92rpx;
						height: 48rpx;
						margin-left: 60rpx;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
					}

					.inforiteml {
						width: 40rpx;
						height: 40rpx;
						// background-color: #78cf88;
						margin-left: 10rpx;

						.inforitemll {
							margin-left: 3rpx;
							margin-top: 3rpx;
							width: 48rpx;
							height: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

					}
				}

				.infol {
					display: flex;
					width: 550rpx;

					.docimg {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}

					.doctit {
						margin-left: 15rpx;
						margin-top: 5rpx;

						.docnamemain {
							display: flex;
							color: #333;

							.docname {
								font-size: 36rpx;
								line-height: 50rpx;
								font-weight: bold;
							}

							.doctype {
								font-size: 28rpx;
								line-height: 60rpx;
								margin-left: 10rpx;
							}

							.docma {
								margin-top: 10rpx;
								margin-left: 10rpx;
							}
						}



					}
				}
			}
		}

	}
</style>